<template>
  <a-modal
    title="添加"
    :visible="$store.state.visible"
    :footer="null"
  >
<!--    :visible="visible"-->
<!--    :confirm-loading="confirmLoading"-->
<!--    @ok="handleOk"-->
<!--    @cancel="handleCancel"-->

    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
      <a-form-item label="姓名">
        <a-input
          v-decorator="['name', { rules: [{ required: true, message: '不能为空' }] }]"
          placeholder="请输入您的姓名"
        />
      </a-form-item>
      <a-form-item label="学号">
        <a-input
          v-decorator="['id', { rules: [{ required: true, message: '不能为空' }] }]"
          placeholder="请输入您的学号"
        />
      </a-form-item>
      <a-form-item label="班级">
        <a-input
          v-decorator="['className', { rules: [{ required: true, message: '不能为空' }] }]"
          placeholder="请输入您的班级"
        />
      </a-form-item>
      <a-form-item label="性别">
        <a-select
          v-decorator="[
          'sex',
          { rules: [{ required: true, message: '不能为空' }] },
        ]"
          placeholder="请输入您的性别"
          @change="handleSelectChange"
        >
          <a-select-option value="男">
            男
          </a-select-option>
          <a-select-option value="女">
            女
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
        <a-button type="primary" html-type="submit" class="confirmButton" @click="confirmClick">
          确认
        </a-button>
        <div style="width: 70px;display: inline-block" ></div>
        <a-button  @click="cancelClick">
          取消
        </a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
  export default {
    name: "AddStudent",
    props:{

    },
    data() {
      return {

        formLayout: 'horizontal',
        form: this.$form.createForm(this, { name: 'coordinated' }),
      };
    },

    methods: {
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log(values.name)
            this.$emit('addStudent',values)

          }else {
            this.$store.commit('changeVisibe')
          }

        });
      },
      handleSelectChange(value) {
        console.log(value);

      },
      cancelClick(){
        this.$store.commit('changeVisibe')
      },
      confirmClick(){

        setTimeout(()=>{
          this.$store.commit('changeVisibe')
        },50)
      }

    },
  }
</script>

<style scoped>

</style>